import { ColumnDef } from '@tanstack/react-table'
import { Row } from '@tanstack/react-table'
import { InputSchemaData } from '@shared/types/ai'
import { Input } from '@renderer/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@renderer/components/ui/select'
import { type as schemaType, location as schemaLocation } from './constant'
import { Switch } from '@renderer/components/ui/switch'
import { ChevronDown, ChevronRight, Plus, X } from 'lucide-react'

export const getIndexs = (row: Row<InputSchemaData>, indexs?: number[]) => {
  if (!indexs) indexs = []
  indexs.unshift(row.index)
  const parentRow = row.getParentRow()
  if (parentRow) {
    return getIndexs(parentRow, indexs)
  } else {
    return indexs
  }
}

// const toggleExpanded = (row: Row<InputSchemaData>) => {
//   console.log(getIndexs(row),'切换前', row.getIsExpanded())
//   row.getToggleExpandedHandler()()
//   console.log(getIndexs(row), '切换后', row.getIsExpanded())
// }

export const createColumns = (
  add: (path: number[]) => void,
  update: (indexs: number[], updates: Partial<InputSchemaData>) => void,
  remove: (path: number[]) => void
): ColumnDef<InputSchemaData>[] => {
  return [
    {
      id: 'expander',
      size: 6,
      header: () => '',
      cell: ({ row }) => {
        return (
          <div style={{ paddingLeft: `${row.depth * 0.5}rem` }} className="m-0">
            {row.getCanExpand() ? (
              <button
                type="button"
                onClick={row.getToggleExpandedHandler()}
                className="h-4 w-4 cursor-pointer"
              >
                {row.getIsExpanded() ? (
                  <ChevronDown className="h-4 w-4" />
                ) : (
                  <ChevronRight className="h-4 w-4" />
                )}
              </button>
            ) : (
              <div className="h-4 w-4" />
            )}
          </div>
        )
      }
    },
    {
      accessorKey: 'name',
      size: 20,
      header: () => '参数名称',
      cell: ({ row }) => {
        return (
          <div className="w-full p-0 m-0">
            <Input
              defaultValue={row.original.name}
              onChange={(e) => update(getIndexs(row), { name: e.target.value })}
              className="w-full border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:shadow-none cursor-default overflow-ellipsis p-0 m-0"
            />
          </div>
        )
      }
    },
    {
      accessorKey: 'description',
      header: () => '参数描述',
      size: 20,
      cell: ({ row }) => {
        return (
          <div className="">
            <Input
              defaultValue={row.original.description}
              onChange={(e) => update(getIndexs(row), { description: e.target.value })}
              className="w-full border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:shadow-none cursor-default overflow-ellipsis p-0 m-0"
            />
          </div>
        )
      }
    },
    {
      accessorKey: 'type',
      header: () => '参数类型',
      size: 10,
      cell: ({ row }) => {
        return (
          <div className="">
            <Select
              value={row.original.type}
              onValueChange={(value) => update(getIndexs(row), { type: value })}
            >
              <SelectTrigger className="border-none bg-transparent shadow-none focus:ring-0 focus:shadow-none p-0 m-0">
                <SelectValue placeholder="选择类型" />
              </SelectTrigger>
              <SelectContent>
                {Object.keys(schemaType).map((v) => (
                  <SelectItem key={v} value={v}>
                    {schemaType[v]}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        )
      }
    },
    {
      accessorKey: 'location',
      header: () => '传入方法',
      size: 10,
      cell: ({ row }) => {
        return (
          <div className="">
            <Select
              value={row.original.location}
              onValueChange={(value) => update(getIndexs(row), { location: value })}
            >
              <SelectTrigger className="border-none bg-transparent shadow-none focus:ring-0 focus:shadow-none p-0 m-0">
                <SelectValue placeholder="选择方法" />
              </SelectTrigger>
              <SelectContent>
                {Object.keys(schemaLocation).map((v) => (
                  <SelectItem key={v} value={v}>
                    {schemaLocation[v]}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        )
      }
    },
    {
      accessorKey: 'required',
      header: () => '必填',
      size: 5,
      cell: ({ row }) => {
        return (
          <div className="p-0 m-0">
            <Switch
              checked={!!row.original.required}
              onCheckedChange={(checked) => update(getIndexs(row), { required: checked })}
              className='p-0 m-0'
            />
          </div>
        )
      }
    },
    {
      accessorKey: 'defaultValue',
      header: () => '默认值',
      size: 20,
      cell: ({ row }) => {
        return (
          <div className="p-0 m-0">
            <Input
              defaultValue={row.original.defaultValue}
              onChange={(e) => update(getIndexs(row), { defaultValue: e.target.value })}
              className="w-full border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:shadow-none cursor-default overflow-ellipsis p-0 m-0"
            />
          </div>
        )
      }
    },
    {
      accessorKey: 'visible',
      size: 5,
      header: () => '开启',
      cell: ({ row }) => {
        return (
          <div className="p-0 m-0">
            <Switch
              checked={row.original.visible}
              onCheckedChange={(checked) => update(getIndexs(row), { visible: checked })}
              className='p-0 m-0'
            />
          </div>
        )
      }
    },
    {
      id: 'expander-add',
      size: 2,
      header: () => null,
      cell: ({ row }) => {
        return (
          <div className="p-0 m-0">
            {row.original.type === 'object' || row.original.type === 'array' ? (
              <button
                type="button"
                onClick={() => add(getIndexs(row))}
                className="cursor-pointer"
              >
                <Plus className="h-4 w-4" />
              </button>
            ) : (
              <div className="h-4 w-4" />
            )}
          </div>
        )
      }
    },
    {
      id: 'actions',
      size: 2,
      header: '操作',
      cell: ({ row }) => (
        <div className="">
          <button type="button" onClick={() => remove(getIndexs(row))} className="cursor-pointer">
            <X className="h-4 w-4" />
          </button>
        </div>
      )
    }
  ]
}
